<template>
    <div class="apply_record">
      <head-top head-title="跑楼申请" go-back="true"></head-top>
      <div class="record_list">
        <div class="list_shell" v-for="(item,index) in list" :key="index">
          <div class="apply_title">
            <p><span>小区：</span>{{item.areas_name}}</p>
            <p>{{item.created_at}}</p>
          </div>
          <div class="shell_li">
            <p><span>项目经理：</span>{{item.real_name?item.real_name:'暂无'}}</p>
          </div>
          <div class="apply_status">
            <p>通过状态：
              <span class="green_color" v-if="item.verify_status===1">通过</span>
              <span class="red_color" v-if="item.verify_status===2">未通过</span>
              <span class="blue_color" v-if="item.verify_status===0">待审核</span>
            </p>
          </div>
        </div>
        <div class="default1" v-show="noResult">
          <p>抱歉！暂无数据</p>
        </div>
      </div>
    </div>
</template>

<script>
  import headTop from '../header/Header'
  import {applyRecord} from '../../api/my'
  import {Indicator} from 'mint-ui'

  export default {
    name: 'ApplyRecord',
    data () {
      return {
        list: [],
        noResult: false
      }
    },
    created() {
      this.getRecord()
    },
    methods: {
      getRecord() {
        Indicator.open({
          text: '..加载中..',
          spinnerType: 'fading-circle'
        })
        applyRecord().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.list = res.data
            if (this.list.length === 0) {
              this.noResult = true
            } else {
              this.noResult = false
            }
            Indicator.close()
            // console.log(this.list)
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
.apply_record{
  padding-top: 60px;
  .record_list{
    padding: 10px;
    .list_shell{
      border-radius: 5px;
      border: 1px solid #f2f2f2;
      box-shadow: 3px 2px 5px #f2f2f2;
      padding: 20px 10px;
      margin-top: 10px;
      .apply_title{
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        p{
          font-size: 15px;
          color: #666666;
          span{
            color: #333333;
          }
        }
      }
      .shell_li{
        margin-top: 10px;
        p{
          font-size: 15px;
          color: #666666;
          span{
            color: #333333;
          }
        }
      }
      .apply_status{
        font-size: 15px;
        margin-top: 10px;
        p{
          color: #333333;
          .green_color{
            color: #008000;
          }
          .red_color{
            color: #C80202;
          }
          .blue_color{
            color: #0C7AD9;
          }
        }
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 140px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 180px;
      }
    }
  }
}
</style>
